<template>
	<view>
		<view>
			<!-- controlsList 表示控件的列表  controlsSize 表示每个控件的大小 -->
			<!-- <drag-and-drop-sort :controlsList="dataArray" :controlsSize="{width: 50, height: 50}">
				<template #content="{item}">
					<view :style="{'background': item.color}" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
						{{item.label}}
					</view>
				</template>
			</drag-and-drop-sort> -->

			<view @click="selectPics">
				<view
					:style="{margin:'auto', width: mokaTemplate.MokaWidth*mokaTempRate+'rpx', height: mokaTemplate.MokaHeight*mokaTempRate+'rpx', backgroundColor: mokaTemplate.BackgroundColor, padding: mokaTemplate.MokaPadding*mokaTempRate+'rpx', position: 'relative'}">
					<view
						:style="{width: mokaTemplate.TextBoxWidth*mokaTempRate+'rpx', height: mokaTemplate.TextBoxHeight*mokaTempRate+'rpx', 'background-color': mokaTemplate.TextBoxBackgroundColor, position: 'absolute', top: mokaTemplate.TextBoxTop*mokaTempRate, left: mokaTemplate.TextBoxLeft*mokaTempRate}">
						<view :style="{padding:mokaTemplate.TextBoxPadding*mokaTempRate+'rpx'}">
							<text
								:style="{fontSize: mokaTemplate.TitleSize*mokaTempRate+'rpx', color: mokaTemplate.TitleColor}">启明星</text><br>
							<text
								:style="{fontSize: mokaTemplate.MemoSize*mokaTempRate+'rpx', color: mokaTemplate.MemoColor}">性别：男</text>
						</view>
					</view>
					<view
						:style="{position: 'absolute', width: mokaTemplate.PicBoxWidth*mokaTempRate+'rpx', height: mokaTemplate.PicBoxHeight*mokaTempRate+'rpx', top: mokaTemplate.PicBoxTop*mokaTempRate+'rpx', left: mokaTemplate.PicBoxLeft*mokaTempRate+'rpx', backgroundColor: mokaTemplate.PicBoxBackgroundColor}">
						<image v-for="(itm, idx) in mokaTemplate.TemplatePics" :key="idx" :src="itm.PicSrc"
							:style="{width: itm.PicWidth*mokaTempRate+'rpx', height: itm.PicHeight*mokaTempRate+'rpx', position: 'absolute', top: itm.PicTop*mokaTempRate+'rpx', left: itm.PicLeft*mokaTempRate+'rpx', backgroundColor: '#FFFFCC'}">
					</view>
					<!-- @click="changPic(idx)" -->
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	// import dragAndDropSort from './drag';
	export default {
		// components: {
		// 	dragAndDropSort,
		// },
		data() {
			return {
				mokaStyle: 0,
				mokaTemplateID: 0,
				mokaTemplate: {},
				mokaTempRate: 1,
				// 这个内容可以自定义
				// dataArray: [
				// 	{color: '#ee3131', label: '1'},
				// 	{color: '#2dc3d5', label: '2'},
				// 	{color: '#f5aa41', label: '3'},
				// 	{color: '#42b983', label: '4'},
				// 	{color: '#1983fb', label: '5'},
				// 	{color: '#a15afd', label: '6'},
				// 	{color: '#ffe874', label: '7'},
				// 	{color: '#00a8fb', label: '8'},
				// 	{color: '#f36586', label: '9'},
				// 	{color: '#16d46b', label: '10'},
				// ],
				tempFiles: [],
				tempLength: 0,
				startX: 0,
				startY: 0,
				currentIndex: -1,
			};
		},
		onLoad(option) {
			this.mokaTemplateID = option.mokaTemplateID
			this.mokaStyle = option.style
			this.onGetMokaTemplate();
		},
		mounted() {
			// this.$nextTick(() => {
			// 	uni.setScreenOrientation({
			// 		orientation: 'landscape'
			// 	})
			// })
		},
		methods: {
			onGetMokaTemplate() {

				this.$httpost('/Moka/Template', {
					TemplateID: this.mokaTemplateID,
					TargetUserID: 0
				}).then(res => {
					// console.log('Template', res);
					if (res.code == 200) {
						this.mokaTemplate = res.data.MokaTemplate;
					}

				});
			},
			selectPics() {
				let _that = this;

				// console.log('imageCount', _that.mokaTemplate.TemplatePics.length);

				uni.chooseMedia({
					count: _that.mokaTemplate.TemplatePics.length,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						// console.log(res)
						_that.setPics(-1, res.tempFiles)
					}
				})
			},
			setPics(index, tempFiles) {
				// console.log('tempFiles', tempFiles)
				// let newarr = Object.assign([],tempFiles).map(item => {
				// 	// return Object.assign({},item)
				// 	return JSON.parse(JSON.stringify(item))
				// })
				// tempFiles.forEach(val => {
				// 	this.$set(val,'selected', true);
				// });

				if (index == -1) {
					this.tempFiles = tempFiles
					// console.log(this.tempFiles)
					this.tempLength = this.tempFiles.length
				} else {

					// this.tempFiles[index] = tempFiles // Object.assign({},tempFiles[0])

					this.tempFiles.splice(index, 1, tempFiles[0]);
				}

				uni.setStorageSync("tempMoka", this.tempFiles);


				// if (this.mokaStyle == 1) {
				// 	uni.navigateTo({
				// 		url: '/moka/pages/mokaMakeingHeng?targetUser=0&mokaTemplateID=' + this.mokaTemplateID
				// 	})
				// } else if (this.mokaStyle == 2) {
				// 	uni.navigateTo({
				// 		url: '/moka/pages/mokaMakeingShu?targetUser=0&mokaTemplateID=' + this.mokaTemplateID
				// 	})
				// }


				uni.navigateTo({
					url: '/moka/pages/mokaMakeTarget?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.mokaTemplateID
				})



				// console.log('this.tempFiles', this.tempFiles)
			},
			changPic(index) {
				let _that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						// console.log(res)
						_that.setPics(index, res.tempFiles)
					}
				})
			}
			// handleTouchStart(e, index) {
			// 	console.log('Start', e, index)
			// 	this.currentIndex = index
			// 	this.startX = e.changedTouches[0].clientX
			// 	this.startY = e.changedTouches[0].clientY

			// 	console.log(this.currentIndex)

			// 	console.log('移动', this.startX, this.startY)
			// },
			// handleTouchMove(e, index) {
			// 	console.log('Move', e, index)
			// 	let moveX = e.changedTouches[0].clientX
			// 	let moveY = e.changedTouches[0].clientY

			// 	console.log('目标', moveX, moveY)

			// 	let obj = uni.createSelectorQuery().select('.item')

			// 	obj.boundingClientRect((data) => { // data - 各种参数

			// 		console.log(data)

			// 	}).exec()
			// 	// let offsetX = moveX - this.startX
			// 	// let offsetY = moveY - this.startY

			// 	// let dragIndex = this.currentIndex
			// 	// let targetIndex = Math.floor((index * offsetY) / 100)

			// 	// console.log('移动值', dragIndex)

			// 	// if (targetIndex >= 0 && targetIndex < this.list.length && targetIndex != dragIndex) {
			// 	// 	let dragItem = this.list[dragIndex]
			// 	// 	this.list.splice(dragIndex, 1)
			// 	// 	this.list.splice(targetIndex, 0, dragItem)
			// 	// 	this.currentIndex = targetIndex
			// 	// }

			// 	// if (e.type === 'touchend') {
			// 	// 	this.currentIndex = -1
			// 	// }

			// 	// console.log(dragIndex, targetIndex)

			// },
			// handleTouchEnd(e, index) {
			// 	console.log('End', e)
			// 	let moveX = e.changedTouches[0].clientX
			// 	let moveY = e.changedTouches[0].clientY

			// 	let offsetX = moveX - this.startX
			// 	let offsetY = moveY - this.startY

			// 	if (e.type === 'touchend') {
			// 		this.currentIndex = -1
			// 	}

			// 	console.log(this.currentIndex)
			// }
		}
	}
</script>

<style lang="scss">
	.pics {}

	.item {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: 1px solid #CCC;
		margin-bottom: 10px;
	}

	.pic {
		width: 80vw;
		height: 300rpx;
		border: 1rpx solid #fff;
		text-align: center;
		color: #666
	}

	.pic image {
		width: 100%;
		height: 100%
	}
</style>